<template>
<view>
	<u-loading-page :loading="loadstatus"></u-loading-page>
	<u-notify ref="uNotify" message="Hi"></u-notify>
	<view class="u-p-l-20 u-m-t-20">
		<view class="u-p-l-20"><u--text text="请输入关键字或拼音缩写搜索" lineHeight="25" align="left" color="#ccc"></u--text></view>
		<u-search :clearabled="true"
				  height="40"
				  :inputStyle="searchcss"
				  :actionStyle="searchtxt"
				  borderColor="#d4237a"
				  color="#d4237a"
				  :placeholder="taginfo.tagname"
				  bgColor="#f9f9f9"
				  :v-model="keyword"
				  :animation="false"
				  @custom="searchgo">
		</u-search>
	</view>
	
		<view class="">
			<!--view class="u-m-r-10" v-for="hiskey in searchhistory_key">
				<u-tag :text="hiskey" plain size="large" type="error" @click="searchgo(hiskey)"></u-tag>
			</view-->
			<u-tabs :list="hiskey"
				:scrollable="true"
				:lineHeight="0"
				:current="currenttabs"
				:inactiveStyle="{
				            color: '#cccccc',
							border:'1px solid #cccccc',
							borderRadius:'4px',
							padding:'2px 8px'
				        }"
				:activeStyle="{
				            color: '#d4237a',
							border:'1px solid #d4237a',
							borderRadius:'4px',
							padding:'2px 8px'
				        }"
				itemStyle="padding-left: 5px; padding-right: 5px;margin:10px 0px;"
				@click="hiskeygo"></u-tabs>
		</view>
		<view class="u-info-disabled u-font-xs u-flex-y u-flex-middle">
			<view >已收录药材{{user.siteInfo.sitedata.yc_num}}条，功效等{{user.siteInfo.sitedata.gx_num}}条</view>
			<view>方剂{{user.siteInfo.sitedata.fj_num}}条，典籍{{user.siteInfo.sitedata.dj_num}}本</view>
		</view>
		<u-empty :text="emptytxt" class="u-m-t-80" mode="data"  icon="http://ws.yodin.com/storage/empty/data.png" :show="taginfo.cate.length == 0" v-if="loadstatus==false"></u-empty>
	
	<view class="u-padding-20" v-if="taginfo.cate.length>0">
		<view v-for="(cate, index) in taginfo.cate" :key="index">
			<u-divider :text="cate.categoryname" textSize="24" textColor="#d4237a" lineColor="#eeeeee" :hairline="true"></u-divider>
			<boxList :druglist="cate" :tagname="taginfo.tagname" :listcount="cate.listcount" :categoryid="cate.categoryid"></boxList>
		</view>
		<u-gap height="70"></u-gap>
	</view>
	
</view>
</template>


<script>
import boxList from "@/components/box-list.vue";
import {mapState,mapMutations} from 'vuex';
import base from "@/config/baseUrl";
export default {
	components: {
	  boxList
	},
	data(){
		return {
			loadstatus:false,
			searchcss:{
				'fontSize':'22px'
			},
			searchtxt:{
				'width':'60px',
				'fontSize':'20px',
				'color':'#13227a'
			},
			taginfo:{
				cate:''
			},
			searchhistory_key:[],
			keyword:'',
			hiskey:[],
			emptytxt:'加载中',
			currenttabs:"0"
		};
	},
	computed: {
	  ...mapState(['user']),
	},
	onShareAppMessage: function (res) {
		if (res.from === 'button') {}
		if (this.hasLogin){
			let data = {s:this.user.userInfo.salt}
		}else{
			let data = {s:''}
		}
		return {
			title: '中医草药方大辞典',
			path: '?query='+encodeURIComponent(JSON.stringify(data)),
			success: function(res) {},
			fail: function(res) {}
		}
	},

	onPullDownRefresh() {
			this.taginfo = {cate:''};
			this.getTags(this.keyword);
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 100);
	},
	async onLoad(options) {
		let update_time=this.user.siteInfo.update_time*1000
		if (update_time==0||(Date.now()-update_time>100000)){
			let siteinfo=await this.$store.dispatch("getsiteInfo");
			//this.user.siteInfo.goods_cate
		}
		let searchhistory=['天麻','人参','巴豆','苦','ZSZ','感冒','黄花菜','咳嗽']
		this.searchhistory_key=uni.getStorageSync('searchhistory_key');
		if (this.searchhistory_key==''){
			uni.setStorageSync('searchhistory_key', searchhistory);
		}
		this.hiskey=this.searchhistory_key.map(item =>({
			 name:item,
		 }))
		
		await this.getTags(this.keyword)
		// #ifdef H5
		if (options.length>0){
			query = JSON.parse(decodeURIComponent(options.query));
			if (query!=undefined&&query.s!=''&&query.s!=undefined){this.showsalt(query.s)}
		}
		// #endif
		// #ifdef MP-WEIXIN
		
		if (options!=undefined){
			query = JSON.parse(decodeURIComponent(options.query));
			if (query!=undefined&&query.s!=''&&query.s!=undefined){this.showsalt(query.s)}
		}
		// #endif
	},

	methods:{
		showsalt(saltstr){
                    this.$api('user.clientuserinfo', {
						salt:saltstr
					}).then(res => {
						if (res.code==200){
							this.issalt=true
							this.saltinfo=res.data.clientuserinfo
							this.$refs.uNotify.show({
								top: 0,
								type: 'error',
								color: '#000',
								bgColor: '#f9ae3d',
								message: '\n\n欢迎光临，本小程序推荐来源于好友 '+this.saltinfo.nickname+' ',
								duration: 1000 * 5,
								fontSize: 15,
								safeAreaInsetTop:true
							})
						}
                    }).catch((e)=>{});
		},
		searchgo(e){
			this.loadstatus=true
			this.keyword=e
			this.getTags(e)
		},
		hiskeygo(e){
			this.loadstatus=true
			//this.keyword=e.name
			this.getTags(e.name)
		},
		getTags(tagname){
			this.emptytxt="加载中.."
			return new Promise((resolve , reject)=>{
					this.$api('dcd.search',{
							name:tagname
						}).then(res => {
							if (res.code==200){
								this.loadstatus=false
								this.taginfo=res.data
								
								if (this.taginfo.cate.length>0&&this.keyword!=''){
									console.log(this.taginfo.cate.length)
									this.searchhistory_key.unshift(this.keyword)
									this.searchhistory_key=this.searchhistory_key.filter(function(item, index, arr) {
										//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
										return arr.indexOf(item, 0) === index;
									  });
									let new_searchhistory = []
									for (let i = 0; i < 10; i++) {
										if (this.searchhistory_key[i]!=undefined&&this.searchhistory_key[i]!=''){
											new_searchhistory.push(this.searchhistory_key[i])
										}
									}
									
									this.searchhistory_key=new_searchhistory
									this.hiskey=this.searchhistory_key.map(item =>({
										 name:item,
									 }))
									 
									 //this.currenttabs=0;
									 uni.setStorageSync('searchhistory_key', new_searchhistory);
								}
								if (this.taginfo.cate.length==0){
									console.log('aaa')
									this.emptytxt="抱歉，没有找到相关信息"
								}
								resolve(res.data)
							}
					}).catch(e => {})
			})
		},
	}
	
};
</script>
<style lang="scss" scoped>
.searchzdy{
	border-width: 4px;
}

</style>
